<template>
    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="message border-bottom" v-for="message in messageList">
                    <div class="message-img">
                        <img :src="message.sendUser.photo" class="img-fluid img-photo">
                    </div>

                    <div class="message-content w-75">
                        <span class="font-weight-bold"> {{message.sendUser.name}} </span>
                        <span v-if="message.type === MESSAGE_TYPE.LIKE.key">点赞了我的文章: </span>
                        <span v-if="message.type === MESSAGE_TYPE.COMMENT.key">评论了我的文章: </span>
                        <span v-if="message.type === MESSAGE_TYPE.REPLY.key">回复了我的评论: </span>
                        <a href="javascript:void(0)" @click="changeReadAndJump(message.id, READ_STATUS.READ.key, message.postId)">{{ message.post.title }}</a>
                        <span v-if="message.type !== MESSAGE_TYPE.LIKE.key">
                            <br>
                            {{message.content}}
                        </span>

                    </div>
                    <div style="width: 15%">
                        <span style="float:right;" class="text-secondary">{{ message.createTime | formatTime }}</span>
                        <br><br>
                        <span @click="changeRead(message.id, READ_STATUS.UNREAD.key)" title="标记为未读" v-if="READ_STATUS.READ.key === message.read" style="float:right;" class="text-light badge badge-secondary">{{ READ_STATUS.READ.value }}</span>
                        <span @click="changeRead(message.id, READ_STATUS.READ.key)" title="标记为已读" v-if="READ_STATUS.UNREAD.key === message.read" style="float:right;" class="text-light badge badge-warning">{{ READ_STATUS.UNREAD.value }}</span>
                    </div>

                </div>

            </div>
            <pagination v-show="messageTotal > 5" ref="pagination" :list="list" :size="5"></pagination>
        </div>

    </div>

</template>

<script>
import Pagination from "@/components/Pagination";
export default {
    name: "Message",
    components: {Pagination},
    data: function () {
        return {
            messageList: [],
            MESSAGE_TYPE: MESSAGE_TYPE,
            READ_STATUS: READ_STATUS,
            messageTotal: 0
        }
    },
    mounted() {
        let _this = this;
        _this.list(1);
    },
    methods: {
        list(page){
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/message/list', {
                page: page,
                size: _this.$refs.pagination.size,
            }).then((response) => {
                let resp = response.data;
                _this.messageList = resp.content.list;
                _this.$refs.pagination.render(page,resp.content.total);
                _this.messageTotal = resp.content.total;
            })
        },
        changeRead(id, read) {
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/message/changeRead', {
                id: id,
                read: read
            }).then(response=>{
                let resp = response.data;
                if (resp.success) {
                    _this.list(_this.$refs.pagination.page);
                    _this.$parent.getUnreadMessageNum();
                } else {
                    Toast.warning(resp.message);
                }
            })
        },
        changeReadAndJump(id, read, postId) {
            let _this = this;
            _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/message/changeRead', {
                id: id,
                read: read
            });
            _this.$router.push("/post/detail?id=" + postId);
        }
    }

}
</script>

<style scoped>
.img-photo {

}
.message-img {
    width: 10%;
    margin-right: 10px;
}
.message-content {

}
.message {
    display: flex;
    margin-bottom: 10px;
}
</style>